<template>
  <view class="container">
    <view class="header">
      <view class="return" @click="goToTemple">
        <image style="height: 60%;width: 40%;" src="/static/logo/返回.png"></image>
      </view>
      <view class="text">
        <text>道教神仙</text>
      </view>
      <view class="search">
        <image style="height: 80%;width: 40%;" src="/static/logo/搜索.png"></image>
      </view>
    </view>

    <view class="abox">
      <view class="box1">
        <view class="sxname">老君阁</view>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%991.1.png" class="sximage1" mode=""/>
        <text class="more" style="color: gray;">了解更多</text>
      </view>
      <view class="box1">
        <view class="sxname">财神殿</view>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%991.2.png" class="sximage1" mode=""/>
        <text class="more" style="color: gray;">了解更多</text>
      </view>
    </view>

    <view class="bbox">
      <view class="box2">
        <view class="sxname">二仙殿</view>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%992.1.png" class="sximage2" mode=""/>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%992.2.png" class="sximage2" mode=""/>
        <text class="more" style="color: gray;">了解更多</text>
      </view>
    </view>

    <view class="cbox">
      <view class="box3">
        <view class="sxname">上清宫——道教尊神"三清"</view>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%993.1.png" class="sximage3" mode=""/>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%993.2.png" class="sximage3" mode=""/>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%993.3.png" class="sximage3" mode=""/>
        <text class="more" style="color: gray;">了解更多</text>
      </view>
    </view>

    <view class="cbox">
      <view class="box3">
        <view class="sxname">朝阳洞</view>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%994.1.png" class="sximage3" mode=""/>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%994.2.png" class="sximage3" mode=""/>
        <image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%9E%E4%BB%99/%E7%A5%9E%E4%BB%994.3.png" class="sximage3" mode=""/>
        <text class="more" style="color: gray;">了解更多</text>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  data() {
    return {
      templeName: '道教神仙'
    }
  },
    methods: {
      goToTemple() {
        uni.redirectTo({
          url: '/pages/temple/temple'
        })
      }
    }
  }
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.header{
  margin-top: 10px;
  display: flex;
  height: 6vh;
  width: 100%;
  /* background-color: aquamarine; */
}
.return{
  display: flex;
  flex: 1;
  float: right;
  margin-left: 10px;
  justify-content: flex-start;/*水平居左*/
  align-items: center;/*垂直居左*/
}
.search{
  display: flex;
  flex: 1;
  float: left;
  margin-right: 10px;
  justify-content: flex-end;/*水平居右*/
  align-items: right;/*垂直居右*/
}
.text{
  display: flex;
  flex: 3;
  height: 100%;
  width: auto;
  font-size: 16px;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
}
.abox{
  display: flex;
  align-items: center;
  width: 90%;
  height: 25vh;
  margin: 0 auto;
  margin-bottom: 10px;
  /* background-color: aquamarine; */
}
.bbox{
  width: 90%;
  height: 25vh;
  margin: 0 auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  /* background-color: aquamarine; */
}
.cbox{
  width: 90%;
  height: 25vh;
  margin: 0 auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  /* background-color: aquamarine; */
}
.box1{
  box-shadow: 0 0 4px 1px #cfcfcf;
  border-radius: 8px;
  width: 40%;
  height: 21vh;
  flex-wrap: wrap;
  margin:0 auto ;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffffff;
}
.box2{
  display: flex;
  align-items: center;
  width: 90%;
  height: 22vh;
  margin:0 auto ;
  gap:5px;
  box-shadow: 0 0 4px 1px #cfcfcf;
  border-radius: 8px;
  flex-wrap: wrap;
  padding: 10px;
  background-color: #ffffff;
}
.box3{
  display: flex;
  align-items: center;
  width: 90%;
  height: 22vh;
  margin:0 auto ;
  gap:1px;
  box-shadow: 0 0 4px 1px #cfcfcf;
  border-radius: 8px;
  flex-wrap: wrap;
  padding: 10px;
  background-color: #ffffff;
}
.sxname{
  width: 100%;
  margin-left: 10px;
}
.sximage1{
  width: 90%;
  height: 70%;
  margin-left:10px;
  margin-top: 5px;
}
.sximage2{
  margin-top: 5px;
  width: 49%;
  height: 65%;
}
.sximage3{
  width: 33%;
  height: 70%;
  margin-top: 5px;
}
.more{
  width: 100%;
  font-size: 12px;
  margin-left: 10px;
  margin-top: 5px;
}

</style>
